import Button from '@material-ui/core/Button';
import Home from '@material-ui/icons/Home';
import React from 'react';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
  icon: {
    width: 300,
    height: 300,
    color: theme.palette.secondary.main,
  },
  container: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    minHeight: '50vh',
  },
  button: {
    margin: theme.spacing(2),
  },
  notFound: {
    display: 'flex',
    alignItems: 'center',
  },
}));

const PageNotFound = () => {
  const classes = useStyles();

  return (
    <div className={classes.container}>
      <Typography variant="h1">404</Typography>
      <Button
        color="primary"
        href="/"
        className={classes.button}
        size="large"
        variant="contained"
        startIcon={<Home fontSize="large" />}
      >
        回到首页
      </Button>
    </div>
  );
};

export default PageNotFound;
